/**
 * TS环境下声明 组件Props类型
 *
 *  1. 类组件，就是给 React.Component 传递第一个泛型参数
 *  2. 函数组件
 *     1. 直接标注第一个参数的类型即可
 *      function World(props: { name: string }) {
          return (
            <div>
              <button>World, {props.name}</button>
            </div>
          );
        }
        2. 使用 FC 来标注
 */

import React, { FC, Component } from "react";

interface IProps {
  name: string;
  age: number;
}

class Hello extends Component<{
  name: string;
  age?: number;
  children: React.ReactNode;
}> {
  render(): React.ReactNode {
    const { name, age } = this.props;

    return (
      <div>
        <button>Hello, {name}</button>
      </div>
    );
  }
}

const World: FC<IProps> = (props) => {
  return (
    <div>
      <button>World, {props.name}</button>
    </div>
  );
};

function App() {
  return (
    <div>
      <h1>App</h1>

      <Hello name="张三" age={123}>
        {null}
      </Hello>

      <hr />

      <World name="zhangsan" age={18} />
    </div>
  );
}

export default App;
